<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../plugins/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../plugins/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">

    <!--  头像插件css-->
    <link rel="stylesheet" href="../plugins/croppie/croppie.css">
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-light pt-2">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <h5 class="card-title">头像裁剪上传例子</h5>
            <h6 class="card-subtitle mb-2 text-muted">可用于更换后台管理员的头像</h6>
            <hr>

            <div class="row row-cols-auto">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-column align-items-center text-center">
                                <img src="../dist/img/avatar.jpg" alt="Admin"
                                     class="rounded-circle p-1 bsa-bg-color4 bsa-wh-100 bsa-cursor-pointer"
                                     data-bs-toggle="modal"
                                     data-bs-target="#exampleModal">
                                <div class="mt-3">
                                    <h4>欲饮琵琶码上催</h4>
                                    <p class="text-secondary mb-1">超级管理员</p>
                                    <p class="text-muted font-size-sm">中国 贵州</p>
                                    <button class="btn btn-primary">关注</button>
                                    <button class="btn btn-outline-primary">消息</button>
                                </div>
                            </div>
                            <hr class="my-4">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <h6 class="mb-0"><i class="bi bi-globe bsa-font-20"></i> 个人网址</h6>
                                    <span class="text-secondary">https://xxxxxx.com</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <h6 class="mb-0"><i class="bi bi-github bsa-font-20"></i> Github</h6>
                                    <span class="text-secondary">ajiho</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 头像裁剪Modal -->
            <div class="modal  fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">裁剪新的头像</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col">
                                    <div id="croppie-wraper"></div>
                                </div>
                                <div class="col d-none d-sm-block">
                                    <div class="d-flex flex-column align-items-center ">
                                        <span class="text-muted">预览</span>
                                        <img id="img1" src="../dist/img/avatar.jpg" alt=""
                                             style="height:100px;width: 100px"
                                             class="mt-3 rounded-circle">
                                        <span class="text-secondary mt-3">100x100</span>
                                        <img id="img2" src="../dist/img/avatar.jpg" alt=""
                                             style="height:50px;width: 50px"
                                             class="mt-3 rounded-circle">

                                        <span class="text-secondary">50x50</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">

                            <input type="file" class="d-none" id="fileinput">
                            <button type="button" class="btn btn-outline-secondary" onclick="selectFile()">
                                <i class="bi bi-folder-plus"></i>
                            </button>
                            <button data-deg="90" type="button" class="btn btn-outline-secondary rotate">
                                <i class="bi bi-arrow-counterclockwise"></i>
                            </button>
                            <button data-deg="-90" type="button" class="btn btn-outline-secondary rotate">
                                <i class="bi bi-arrow-clockwise"></i>
                            </button>

                            <button id="croppie-result" type="button" class="btn btn-outline-secondary">
                                <i class="bi bi-cloud-arrow-up"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../plugins/croppie/croppie.min.js"></script>
<script>


    //实例化头像裁剪插件
    let croppie = new Croppie(document.querySelector('#croppie-wraper'), {
        viewport: {width: 200, height: 200, type: 'circle'},
        boundary: {width: 300, height: 300},
        showZoomer: true,
        enableOrientation: true
    });

    document.querySelector('#croppie-wraper').addEventListener('update', function (ev) {
        var cropData = ev.detail;

        if(cropData.orientation !== undefined){
            croppie.result('base64', 'viewport').then(function (blob) {
                document.querySelector('#img1').setAttribute('src', blob);
                document.querySelector('#img2').setAttribute('src', blob);
            })
        }




    });


    // 选择文件
    function selectFile() {
        document.querySelector('#fileinput').dispatchEvent(new MouseEvent('click'))


    }


    document.querySelector('#fileinput').addEventListener('change', function (e) {
        let selectFileList = e.target.files;

        //回显头像
        let reader = new FileReader();
        reader.readAsDataURL(selectFileList[0]);
        reader.onload = function (ex) {
            croppie.bind({
                url: ex.target.result,
                orientation: 1,
                //0:最小化现实 1:缩放显示
                zoom: 0
            });
        }
    });


    //旋转按钮操作
    document.querySelectorAll('.rotate').forEach((el) => {
        el.addEventListener('click', function (event) {
            event.preventDefault();
            let deg = this.dataset.deg;
            croppie.rotate(parseInt(deg));
        });
    });


    //确定按钮裁剪图片
    document.querySelector('#croppie-result').addEventListener('click', function (event) {
        croppie.result('blob', 'viewport').then(function (blob) {

            //创建forData表单对象
            let formData = new FormData();
            //添加头像
            formData.set('avatar', blob);

            alert("ajax上传开始");


            //jquery发送请求示例(这里看你自己要用什么发送ajax)
            // $.ajax({
            //     url: "/upavatar.php",
            //     type: 'POST',
            //     data: formData,
            //     //禁止数据序列化,不加这几个数据接收不到
            //     processData: false,
            //     contentType: false,
            //     cache: false,
            // }).then(function (res) {
            //     if (res.code === 200) {
            //         //上传成功
            //     } else {
            //         //上传失败
            //     }
            // })
        });
    });


</script>
</body>
</html>